<script setup lang="ts">
  import { watch } from 'vue';
  import DetailDrawer from '@/components/detail-drawer/index.vue';
  import { useForm } from '@/hooks/arco/useForm';
  import useDetailDrawerBinder from '@/hooks/arco/useDetailDrawerBinder';
  import DictSelect from '@/components/dict-select/index.vue';

  // 定义组件属性
  interface DrawerProps {
    onSuccess?: () => void;
  }

  const props = withDefaults(defineProps<DrawerProps>(), {
    onSuccess: () => {},
  });

  // 表单验证规则
  const formRules = {
    name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
    serviceCatId: [
      { required: true, message: '请选择所属分类', trigger: 'change' },
    ],
    price: [{ required: true, message: '请输入项目单价', trigger: 'blur' }],
  };

  // 使用useForm hook
  const form = useForm({
    state: {
      id: '',
      name: '',
      serviceCatId: '',
      serviceCatName: '',
      status: 1,
      userCount: 0,
      priceModel: '',
      priceModelName: '',
      price: '',
      duration: 0,
      description: '',
      note: '',
      equipmentNote: '',
      multServices: 0,
      orders: 0,
      createdAt: '',
      updatedAt: '',
    },
    rules: formRules,
  });

  // 使用detail drawer binder
  const editModal = useDetailDrawerBinder({
    modalName: '服务项目',
    onShow: async (mode: string, record: any) => {
      // 详情模式下获取详细信息
      if (mode === 'detail' && record?.id) {
        // 模拟API调用
        return new Promise((resolve) => {
          setTimeout(() => {
            form.setFieldsValue({
              ...record,
            });
            resolve(record);
          }, 300);
        });
      }
      // 编辑模式下设置表单值
      else if (mode === 'edit' && record) {
        form.setFieldsValue({
          ...record,
        });
      }
      // 新增模式下重置表单
      else if (mode === 'add') {
        form.backToInit();
      }
    },
    onOkClick: async (mode: string) => {
      // 表单验证
      await form.validate();

      // 模拟API调用
      return new Promise((resolve) => {
        setTimeout(() => {
          console.log('保存数据:', form.state);
          resolve(form.state);
        }, 500);
      });
    },
  });

  // 暴露方法给父组件
  defineExpose(editModal.expose);
</script>

<template>
  <DetailDrawer v-bind="editModal.bindProps">
    <template #default>
      <a-form
        v-bind="form.bindProps"
        :model="form.state"
        label-align="right"
        layout="vertical"
        auto-label-width
      >
        <a-form-item field="name" label="项目名称">
          <template v-if="editModal.bindProps.mode === 'detail'">
            <span>{{ form.state.name }}</span>
          </template>
          <a-input
            v-else
            v-model="form.state.name"
            placeholder="请输入项目名称"
          />
        </a-form-item>

        <a-form-item field="serviceCatId" label="所属分类">
          <template v-if="editModal.bindProps.mode === 'detail'">
            <span>{{ form.state.serviceCatName }}</span>
          </template>
          <DictSelect
            v-else
            v-model="form.state.serviceCatId"
            type="service_category"
            placeholder="请选择所属分类"
          />
        </a-form-item>

        <a-form-item field="status" label="项目状态">
          <template v-if="editModal.bindProps.mode === 'detail'">
            <span>{{ form.state.status === 1 ? '启用' : '禁用' }}</span>
          </template>
          <a-switch
            v-else
            v-model="form.state.status"
            :checked-value="1"
            :unchecked-value="0"
          />
        </a-form-item>

        <a-form-item
          v-if="editModal.bindProps.mode === 'detail'"
          field="userCount"
          label="使用人数"
        >
          <span>{{ form.state.userCount }}</span>
        </a-form-item>

        <a-form-item field="priceModel" label="收费标准">
          <template v-if="editModal.bindProps.mode === 'detail'">
            <span>{{ form.state.priceModelName }}</span>
          </template>
          <DictSelect
            v-else
            v-model="form.state.priceModel"
            type="price_model"
            placeholder="请选择收费标准"
          />
        </a-form-item>

        <a-form-item field="price" label="项目单价（元）">
          <template v-if="editModal.bindProps.mode === 'detail'">
            <span>{{ form.state.price }}</span>
          </template>
          <a-input-number
            v-else
            v-model="form.state.price"
            placeholder="请输入项目单价"
            mode="button"
            :min="0"
            :precision="2"
          />
        </a-form-item>

        <a-form-item field="duration" label="服务时长（分钟）">
          <template v-if="editModal.bindProps.mode === 'detail'">
            <span>{{ form.state.duration }}</span>
          </template>
          <a-input-number
            v-else
            v-model="form.state.duration"
            placeholder="请输入服务时长"
            mode="button"
            :min="0"
          />
        </a-form-item>

        <a-form-item field="note" label="服务说明">
          <template v-if="editModal.bindProps.mode === 'detail'">
            <span>{{ form.state.note }}</span>
          </template>
          <a-textarea
            v-else
            v-model="form.state.note"
            placeholder="请输入服务说明"
            :auto-size="{ minRows: 2 }"
          />
        </a-form-item>

        <a-form-item field="equipmentNote" label="设备说明">
          <template v-if="editModal.bindProps.mode === 'detail'">
            <span>{{ form.state.equipmentNote }}</span>
          </template>
          <a-textarea
            v-else
            v-model="form.state.equipmentNote"
            placeholder="请输入设备说明"
            :auto-size="{ minRows: 2 }"
          />
        </a-form-item>

        <a-form-item
          v-if="editModal.bindProps.mode === 'detail'"
          label="创建时间"
        >
          <span>{{ form.state.createdAt }}</span>
        </a-form-item>
      </a-form>
    </template>
  </DetailDrawer>
</template>
